<template>
  <div id="left-menu"
       class="fl">
    <el-menu default-active="/product"
             class="el-menu-vertical-demo"
             :class="{'notCollapse': !isCollapse}"
             :router="true"
             @open="handleOpen"
             @close="handleClose"
             :collapse="isCollapse"
             background-color="#39393a">
      <el-menu-item index="/product"
                    @click="change('product')">
        <img v-if="routeName=== 'productHome'"
             src="../assets/icons/analyze.png"
             alt="">
        <img v-else
             src="../assets/icons/analyze-gray.png"
             alt="">
        <span slot="title">Analyze</span>
      </el-menu-item>
      <el-menu-item index="/trends"
                    @click="change('trends')">
        <img v-if="routeName === 'trends'"
             src="../assets/icons/trends.png"
             alt="">
        <img v-else
             src="../assets/icons/trends-gray.png"
             alt="">
        <span slot="title">Trends</span>
      </el-menu-item>
      <el-menu-item index="/baike"
                    @click="change('baike')">
        <img v-if="routeName === 'baike'"
             src="../assets/icons/baike.png"
             alt="">
        <img v-else
             src="../assets/icons/baike-gray.png"
             alt="">
        <span slot="title">Baike</span>
      </el-menu-item>
      <el-menu-item index="discrimination"
                    @click="change('discrimination')">
        <img v-if="routeName === 'discrimination'"
             src="../assets/icons/luxstyle.png"
             alt="">
        <img v-else
             src="../assets/icons/luxstyle2.png"
             alt="">
        <span slot="title">Luxsens News</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { cMixin } from "@/common/mixins";

export default {
  mixins: [cMixin],
  data() {
    return {
      isCollapse: true
    };
  },
  computed: {
    routeName() {
      return this.$route.name;
    }
  },
  methods: {
    handleOpen() {},
    handleClose() {},
    change(val) {
      switch (val) {
        case "product":
          this.$store.commit("toggleFold");
          this.$store.commit("productChange", { title: "Market Analysis" });
          break;
        case "trends":
          this.$store.commit("toggleFold", false);
          this.$store.commit("productChange", { title: "Trends" });
          break;
        case "baike":
          this.$store.commit("toggleFold", false);
          this.$store.commit("productChange", { title: "Wikipedia" });
          break;
        case "discrimination":
          this.$store.commit("toggleFold", false);
          this.$store.commit("productChange", { title: "Luxsens News" });
          break;
      }
    },
    toTrends() {}
  }
};
</script>

<style lang="scss">
@import "../assets/styles/color.scss";

#left-menu {
  height: 100%;
  background-color: $headColor;
  padding-top: 2.2rem;
  .el-menu {
    height: 100%;
    border-right: none;
    .notCollapse {
      width: 7.5rem;
    }
    .el-menu-item {
      height: 2.5rem;
      line-height: 2.5rem;
      margin-bottom: 1rem;
      text-align: center !important;
      &.is-active {
        background-color: #252829 !important;
      }
      &.is-disabled {
        opacity: 1;
        cursor: pointer;
        background-color: none;
      }
      img {
        height: 1.4rem;
        width: 1.4rem;
        transform: translateX(-0.15rem);
      }
    }
  }
}
</style>
